<template>
  <div class="add-order-info-view">

    <el-form :inline="true" label-position="right" label-width="120px">
      <el-row>

        <el-col :span="8">
          <el-form-item label="流程编号：">
            {{ detailData.processNo }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="创建时间：">
            {{ dateFormat('yyyy-mm-dd', detailData.startTime) }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="创建人：">
            {{ detailData.initiator }}
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

    <item-title title="订单信息"/>

    <infomation-view :datas="datas"/>

    <item-title title="产品"/>

    <el-table
            header-cell-class-name="table-header"
        :cell-style="cellStyle"
        :data="tableData"
        border
    >
      <el-table-column type="index" width="55" label="序号"/>
      <el-table-column align="center" header-align="center" label="通用名" min-width="150" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.productPopularName }}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="商品名" prop="productName" show-overflow-tooltip
                       width="100"/>
      <el-table-column align="center" header-align="center" label="包装规格" prop="packSpecs" show-overflow-tooltip
                       width="100"/>
      <el-table-column align="center" header-align="center" label="生产厂家" prop="producer" show-overflow-tooltip
                       min-width="100"/>
      <el-table-column v-if="datas.orderType == 1" align="center" header-align="center" label="市场价(元)" width="100">
        <template #default="scope">
          {{ scope.row.terminalPrice }}
        </template>
      </el-table-column>
      <el-table-column v-if="datas.orderType == 3 || datas.orderType == 4" align="center" header-align="center" label="交易价(元)" width="100">
        <template #default="scope">
          {{ scope.row.tradePrice }}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="数量" width="100">
        <template #default="scope">
          {{ scope.row.putNumber / scope.row.packNum }}{{ scope.row.unit }}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="按计价单位数量" width="150">
        <template #default="scope">
          {{ scope.row.putNumber }}{{ getLabel('sell_unit', scope.row.sellUnit) }}
        </template>
      </el-table-column>
      <el-table-column v-if="datas.orderType == 2" align="center" header-align="center" label="终端价(元)" width="100">
        <template #default="scope">
          {{ scope.row.terminalPrice }}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="小计(元)" min-width="100" show-overflow-tooltip>
        <template #default="scope">
          {{ isInteger(scope.row.totalAmount) }}
        </template>
      </el-table-column>
      <el-table-column v-if="datas.orderType == 2" align="cneter" header-align="center" label="营销模式" show-overflow-tooltip
                       width="100">
        <template #default="scope">
          <span v-if="!scope.row.agentAttribute">终端直销</span>
          <span v-else-if="scope.row.agentAttribute == 1">区域招商</span>
          <span v-else-if="scope.row.agentAttribute == 2">精细招商</span>
        </template>
      </el-table-column>
      <el-table-column v-if="datas.orderType == 2" align="left" header-align="center" label="代理名称" show-overflow-tooltip
                       width="150">
        <template #default="scope">
          {{ scope.row.agentName }}
        </template>
      </el-table-column>
      <el-table-column v-if="datas.orderType == 2" align="center" header-align="center" label="交易价(元)" width="100">
        <template #default="scope">
          {{ scope.row.tradePrice }}
        </template>
      </el-table-column>
    </el-table>

    <detail-drawer ref="refDrawer" :size-width="1000" custom-title>
      <template #title>
        <div style="display: flex;justify-content: space-between">

          <div>
            <span>信用</span>
            <span>{{ name }}</span>
          </div>

        </div>

      </template>
      <template #contents>

        <credit-view :datas="creditData" :statistical="statistical"/>

      </template>
    </detail-drawer>

  </div>
</template>

<script>
import infomationView from '../../../../orderAndReturned/order/detail/modules/infomationView'
import {InfoFilled} from '@element-plus/icons'
import creditView from '../../../../orderAndReturned/order/detail/modules/creditView.vue'
import {defineComponent, inject, reactive, toRefs, watch} from 'vue'

export default defineComponent({
  name: 'AddOrder',
  components: {creditView, InfoFilled, infomationView},
  props: {
    detailData: {
      type: Object,
      default: {}
    },
  },
  setup(props) {
    const api = inject('api')

    var data = reactive({
      datas: {},
      tableData: [],
      refDrawer: null,
      creditData: {},
      name: '',
      statistical: {}
    })

    watch(
        () => props.detailData,
        (newval, oldval) => {
          if (newval && newval.data) {
            console.log(newval.data)
            if (newval.data.order) {
              data.datas = newval.data.order
              data.tableData = newval.data.orderDetail
            }
          }
        },
        {immediate: true, deep: true}
    )
    const agentCredit = (id) => {
      const a = {
        customerId: id,
        customerType: data.datas.agentType
      }
      api.order.ORDER_DETAIL_FINANCE(a).then(res => {
        if (!res.code && res.data) {
          data.statistical = res.data
        }
      })
    }
    const creditClick = (mode, id) => {
      if (mode == 'distribute') {
        data.name = data.datas.distributeName
      } else if (mode == 'terminal') {
        data.name = data.datas.terminalName
      } else if (mode == 'agent') {
        data.name = data.datas.agentName
      }

      api.common
          .CREDIT_PRODUCT_LIST({
            relationId: id,
            creditType: mode,
          })
          .then((res) => {
            if (res.code === 0) {
              data.creditData = res.data
              // reactiveData.listData = res.data.list
              // reactiveData.total = res.data.total
              // reactiveData.quota = res.data.quota
            }
          })

      const a = {
        customerId: id,
        customerType: ''
      }

      if (mode == 'distribute') {
        a.customerType = 'distribute'
      } else if (mode == 'terminal') {
        a.customerType = 'terminal'
      } else if (mode == 'agent') {
        a.customerType = data.datas.agentType
      }

      api.order.ORDER_DETAIL_FINANCE(a).then(res => {
        if (!res.code && res.data) {
          data.statistical = res.data
        }
      })

      data.refDrawer.open()
    }

    return {
      ...toRefs(data),

      creditClick,
      agentCredit
    }
  }
})
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";

.add-order-info-view {

  .mainColor {
    color: $active-color
  }
}
</style>
